<template>
  <div class="dashboard-container">
    <h2>今日订单 | {{ timestamp | parseTime("{y}-{m}-{d} ") }}</h2>
    <el-row>
      <el-card>
        <div slot="header">
          <span class="planning">计划</span>
        </div>
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="mealTmp1"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="套餐">
              <el-table-column
                prop="id"
                label="序号"
                type="index"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column label="套餐名" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" width="120">
                <template v-slot="{ row }">
                  <span>{{ row.count }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="snackTmp1"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="小食">
              <el-table-column
                prop="id"
                label="序号"
                type="index"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column label="小食名" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" width="120">
                <template v-slot="{ row }">
                  <span>{{ row.count }}</span>
                </template></el-table-column
              >
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card style="margin-top:30px;">
        <div slot="header">
          <span class="finished">已完成</span>
        </div>
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="mealTmp2"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="套餐">
              <el-table-column
                prop="id"
                label="序号"
                type="index"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column label="套餐名" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" width="120">
                <template v-slot="{ row }">
                  <span>{{ row.count }}</span>
                </template></el-table-column
              >
            </el-table-column>
          </el-table>
        </div>
        <div class="table-container">
          <el-table
            v-loading="listLoading"
            :data="snackTmp2"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="小食">
              <el-table-column
                prop="id"
                label="序号"
                type="index"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column label="小食名" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" width="120">
                <template v-slot="{ row }">
                  <span>{{ row.count }}</span>
                </template></el-table-column
              >
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getOrder } from "@/api/mealOrder";

export default {
  name: "restaurant",
  data() {
    return {
      timestamp: 0,
      listQuery: {
        size: 50,
        start: 1628208000000,
        end: 1628265600000
      },
      mealList: [],
      snacksList: [],
      mealTmp1: [],
      mealTmp2: [],
      snackTmp1: [],
      snackTmp2: []
    };
  },
  created() {
    this.timestamp = new Date();
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getOrder(this.listQuery).then(res => {
        this.listLoading = false;
        this.list = res.data.records;
        for (const item of this.list) {
          this.mealList.push(item.mealSet.setName);
          if (item.mealSnack) {
            this.snacksList.push(item.mealSnack.snackName);
          }
        }
        this.mealList = this.countList(this.mealList);
        this.snacksList = this.countList(this.snacksList);
        //tmp Array
        this.mealTmp1 = this.mealList.slice(0, 4);
        this.mealTmp2 = this.mealList.slice(4);
        this.snackTmp1 = this.snacksList.slice(0, 1);
        this.snackTmp2 = this.snacksList.slice(1);
      });
    },
    countList(arr) {
      let a = arr.reduce((prev, next) => {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
      let b = [];
      Object.keys(a).forEach(v => {
        let o = {
          name: "",
          count: 0
        };
        o.name = v;
        o.count = a[v];
        b.push(o);
      });
      return b;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f0f2f5;
  padding: 10px 30px;
  .planning {
    color: #579bfc;
  }
  .finished {
    color: #00c875;
  }
}

span {
  font-weight: bold;
}

.table-container {
  width: 60%;
  margin-bottom: 15px;
}

h2 {
  margin-left: 10px;
  color: #1a202c;
  font-weight: bold;
  font-size: 30px;
  line-height: 35px;
}
</style>
